<script setup lang="ts">

</script>

<template>
  <div class="fixed w-[100%] h-[100%] top-0 left-0 z-[100]">
    <img class="w-[100%] h-[100%]" src="@/assets/img/loading.png">
    <div class="absolute bottom-[206px] left-[50%] rtsj">
      <div class="text-[64px] text-[#fff] exit ff-YouSheBiaoTiHei absolute top-0">人体数据正在更新</div>
      <div class="text-[64px] text-[#1A1A1A] ff-YouSheBiaoTiHei">人体数据正在更新</div>
      <div class="text-[64px] text-[#fff] enter ff-YouSheBiaoTiHei absolute top-0">人体数据正在更新</div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.rtsj{
  transform: translateX(-50%);
}

.enter{
  --gap: 0%;
  /* 把文字弄成透明的，然后 背景弄成渐变 */
  //background: linear-gradient(to right, rgba(255,255,255,0) 10%, #F8F9FB 20%);
  background: linear-gradient(to right, rgba(255,255,255,0) var(--gap),#fff, #F8F9FB calc(var(--gap) + 100px));
  color: transparent;
  /* 会没有动画，因为 --gap 不是css属性，动画的要求是 数值类的css属性改变 */
  animation: gapAnimation 1.5s ease forwards;
  animation-delay: .5s;
}

.exit{
  --gap1: 0%;
  /* 把文字弄成透明的，然后 背景弄成渐变 */
  //background: linear-gradient(to right, rgba(255,255,255,0) 10%, #F8F9FB 20%);
  background: linear-gradient(to right,#fff,#F8F9FB var(--gap1), rgba(red, 0) calc(var(--gap1) + 100px));
  color: transparent;
  /* 会没有动画，因为 --gap 不是css属性，动画的要求是 数值类的css属性改变 */
  animation: gapAnimation1 1.5s ease forwards;
  animation-delay: 3.8s;
  opacity: 0;
}

/* css 自定义属性名称需要，用 -- 开头 */
@property --gap {
  /* 语法规则 */
  syntax: '<percentage>';
  /* 默认值 */
  initial-value: 0%;
  inherits: false;
  /* 是否可以集成 */

}

@keyframes gapAnimation {
  0% {
    --gap: 0%;
  }

  100% {
    --gap: 100%;
    opacity: 0;
  }
}

/* css 自定义属性名称需要，用 -- 开头 */
@property --gap1 {
  /* 语法规则 */
  syntax: '<percentage>';
  /* 默认值 */
  initial-value: 0%;
  inherits: false;
  /* 是否可以集成 */

}

@keyframes gapAnimation1 {
  0% {
    --gap1: 0%;
    opacity: 1;
  }

  100% {
    --gap1: 100%;
    opacity: 1;
  }
}
</style>
